<template>

  <el-dialog ref="form" v-model="isShowForm1" class="formclass" draggable width="550px">
    <el-form
        ref="FORM"
        :model="form1"
        label-width="150px"
        style="max-width: 460px"
    >
      <el-form-item label="库房名称">
        <el-input
            v-model="form1.warehouseName"
            class="w-50 m-2"
            clearable
            placeholder="输入库房名称"
            style="width: 250px;margin-right: 5px"
        />
      </el-form-item>
      <el-form-item label="库房库管员">
        <el-input
            v-model="form1.stockKeeper"
            class="w-50 m-2"
            clearable
            placeholder="输入库房库管员"
            style="width: 250px;margin-right: 5px"
        />
      </el-form-item>
      <el-form-item label="库房预警值">
        <el-input
            v-model="form1.alertValue"
            class="w-50 m-2"
            clearable
            placeholder="输入库房预警值"
            style="width: 250px;margin-right: 5px"
        />
      </el-form-item>
      <el-form-item label="库房最大库存量">
        <el-input
            v-model="form1.maxInventory"
            class="w-50 m-2"
            clearable
            placeholder="输入库房最大库存量"
            style="width: 250px;margin-right: 5px"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="sure()">提交</el-button>
        <el-button @click="cancelExpert">取消</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
  <el-dialog v-model="isShowForm" class="formclass" draggable width="550px">
    <div>
      <el-form
        ref="FORM"
        :model="form"
        :rules="rule"
        label-width="170px"
        style="max-width: 460px"
    >
      <el-form-item label="库房名称">
        <el-input
            v-model="form.warehouseName"
            class="w-50 m-2"
            clearable
            placeholder="输入库房名称"
            style="width: 250px;margin-right: 5px"
        />
      </el-form-item>
      <el-form-item label="库房地址" prop="warehouseAddress">
        <el-input v-model="form.warehouseAddress" :readonly="true"/>
      </el-form-item>
      <el-row>
        <el-col :span="20">
          <el-form-item label="省" prop="province">
            <el-select v-model="form.province" filterable fit-input-width="true" placeholder="请选择省份"
                       prop="province"
                       style="width: 120px" @change="getProvinces">
              <el-option
                  v-for="item in locValue.provinces"
                  :key="item.provinceId"
                  :label="item.provinceName"
                  :value="item.provinceName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="市" prop="city">
            <el-select v-model="form.city" placeholder="请选择市" prop="city" style="width: 150px" @change="getCities">
              <el-option
                  v-for="item in this.locValue.cities"
                  :key="item.cityId"
                  :label="item.cityName"
                  :value="item.cityName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item label="区" prop="religion">
            <el-select v-model="form.religion" placeholder="请选择区" prop="religion" style="width: 150px;"
                       @change="getRegions">
              <el-option
                  v-for="item in locValue.religions"
                  :key="item.regionId"
                  :label="item.regionName"
                  :value="item.regionName">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="详细地址" prop="other">
        <el-input v-model="form.other" placeholder="请输入详细地址" prop="other" style="width: 250px;margin-top: 10px"
                  @change="getOthers"></el-input>
      </el-form-item>
      <el-form-item label="库房库管员">
        <el-input
            v-model="form.stockKeeper"
            class="w-50 m-2"
            clearable
            placeholder="输入库房库管员"
            style="width: 250px;margin-right: 5px"
        />
      </el-form-item>
      <el-form-item label="库房预警值">
        <el-input
            v-model="form.alertValue"
            class="w-50 m-2"
            clearable
            placeholder="输入库房预警值"
            style="width: 250px;margin-right: 5px"
        />
      </el-form-item>
      <el-form-item label="库房最大库存量">
        <el-input
            v-model="form.maxInventory"
            class="w-50 m-2"
            clearable
            placeholder="输入库房最大库存量"
            style="width: 250px;margin-right: 5px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit()">提交</el-button>
        <el-button @click="cancelExpert">取消</el-button>
      </el-form-item>
    </el-form>
    </div>


  </el-dialog>

  <div>
    <div class="head">
      <el-button :icon="Icon.Search" @click="showSearchForm">库房查询</el-button>
      <el-button :icon="Icon.Edit" @click="updateWareHouse">库房编辑</el-button>
      <el-button :icon="Icon.Delete" @click="deleteWareHouse">库房删除</el-button>
      <el-button :icon="Icon.CirclePlus" @click="addWareHouse">库房登记</el-button>
    </div>
     <el-dialog v-model="isShowSearchForm"  class="formclass" draggable width="600px">
      <el-form
          :model="selectFrom"
          label-width="100px"
      >
        <el-form-item label="商品名称" prop="goodName">
          <el-input v-model="input" placeholder="请输入商品名称"/>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="库房地址" prop="warehouseAddress">
              <el-select v-model="selectForm.inboundRoom" clearable="true" placeholder="请选择库房地址">
                <el-option
                    v-for="item in boundOptions"
                    :key="item.provinceName"
                    :label="item.provinceName"
                    :value="item.provinceName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-form-item label="库房等级" prop="level">
              <el-select v-model="selectForm.level" placeholder="请选择库房等级">
                <el-option
                    v-for="item in levelOptions"
                    :key="item.level"
                    :label="item.label"
                    :value="item.level">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="cancelExpert">取消</el-button>
            <el-button type="primary" @click="search">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <el-divider></el-divider>
    <el-scrollbar>
      <el-table ref="multipleTable"
                :data="tableData"
                border
                height="542px"
                row-style="height:50px"
                stripe style=" width: 100%"
                tooltip-effect="dark"
                @select="select"
                @selection-change="handleSelection">
        <el-table-column type="selection" width="39"></el-table-column>
        <el-table-column :index="getIndex" label="序号" type="index" width="63"/>
        <el-table-column label="库房编号" prop="warehouseId" width="84"/>
        <el-table-column label="库房名称" prop="warehouseName" width="200px"/>
        <el-table-column label="库房地址" prop="warehouseAddress" width="311px"/>
        <el-table-column label="库管员" prop="stockKeeper" width="100px"/>
        <el-table-column label="预警值" prop="alertValue" width="80px"/>
        <el-table-column label="最大库存量" prop="maxInventory" width="110px"/>
        <el-table-column label="库房等级" prop="warehouseLevel" width="98px">
          <template v-slot="scope">
            <el-tag v-if="scope.row.warehouseLevel ===1" effect="light" size="large" type="success">中心库房</el-tag>
            <el-tag v-else-if="scope.row.warehouseLevel===2" effect="light" size="large">分站库房</el-tag>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" prop="">
          <template #default="scope">
            <el-button color="#97d578" plain round size="default" @click="look(scope.row)">查看库存</el-button>
            <el-button plain round size="default" type="primary" @click="mingxi(scope.row)">查看明细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <el-pagination
        :current-page=pageNow
        :page-size=pageSize
        :page-sizes="[10,20,30,40]"
        :total=totalSize
        background
        layout="total, prev, pager, next"
        style="margin-top: 15px"
        @current-change="pageChange"
    >
    </el-pagination>

    <el-dialog v-model="Visible" center title="详细信息" width="60%">
      <div style="margin-left: 5px;margin-bottom: 6px">
        <span style="font-size: 15px">商品信息:</span>
      </div>
      <el-table :data="tableData1" border>
        <el-table-column :index="getIndex" label="序号" type="index" width="150"/>
        <el-table-column label="商品代码" prop="code"/>
        <el-table-column label="商品名称" prop="inventoryName"/>
        <el-table-column label="商品数量" prop="num"/>
      </el-table>
    </el-dialog>
    <el-dialog v-model="Visible1" center title="出入库明细" width="60%">
      <el-table :data="table" border>
        <el-table-column :index="getIndex" label="序号" type="index" width="150"/>
        <el-table-column label="商品代码" prop="code"/>
        <el-table-column label="商品数量" prop="num"/>
        <el-table-column label="入库时间" prop="outTime"/>
        <el-table-column label="运输公司" prop="company"/>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import Header from "@/components/Header";
import {MoreFilled, CirclePlus, Search, Edit, Delete} from "@element-plus/icons-vue";
import axios from "axios";
import {request_operation} from "@/util/request";
import {ElMessage,ElNotification} from "element-plus";

export default {
  name: "WarehouseManage",
  data() {
    return {
      Icon:{Search,CirclePlus,Edit,MoreFilled,Delete},
      locValue: {
        provinces: [],
        cities: [],
        religions: []
      },
      selectForm:{
        inboundRoom: '',
        level: '',
        warehouseName: ''
      },
      isShowSearchForm:false,

      isShowForm: false,
      isShowForm1: false,
      input: null,
      inboundRoom: null,
      boundOptions: [],
      bound: null,
      form: {
        province: '',
        city: '',
        religion: '',
        other: '',
        warehouseName: '',
        warehouseAddress: '',
        stockKeeper: "",
        alertValue: null,
        maxInventory: null,
        warehouseLevel: 2
      },
      form1: {
        warehouseName: '',
        stockKeeper: "",
        alertValue: null,
        maxInventory: null,
        warehouseLevel: 2
      },
      multipleSelection:[],
      tableData: [],
      tableData1: [],
      tvalue: '',
      pageSize: 10,
      totalSize: 100,
      pageNow: 1,
      vendorName: '',
      zip: '',
      Visible: false,
      Visible1: false,
      table: [],
      data: {},
      pstate: 0,
      levelOptions: [
        {
          level: 1,
          label: '中心库房'
        },
        {
          level: 2,
          label: '分站库房'
        }],
      level: null,
      rule:{
        warehouseName:[{required:true,message:"必填",trigger: 'blur'}],
        province:[{required:true,message:"必选",trigger: 'blur'}],
        city:[{required:true,message:"必选",trigger: 'blur'}],
        religion:[{required:true,message:"必选",trigger: 'blur'}],
        warehouseAddress:'',
        stockKeeper:[{required:true,message:"必填",trigger: 'blur'}],
        other:[{required:true,message:"必填",trigger: 'blur'}],
        alertValue:[{required:true,message:"必填",trigger: 'blur'}],
        maxInventory:[{required:true,message:"必填",trigger: 'blur'}],
        warehouseLevel:[{required:true,message:"必填",trigger: 'blur'}]

      },
    }
  },
  methods: {

    showSearchForm(){
      this.isShowSearchForm = true
      this.selectForm={
        inboundRoom: '',
            level: '',
            warehouseName: ''
      }
    },
    getBoundOptions() {
      axios.get("http://localhost:1080/province").then(res => {
        res = res.data
        if (res.code == '200') {
          this.boundOptions = res.data
        } else {
        }
      })
    },
    addWareHouse() {

      this.isShowForm = true
    },
    onSubmit() {
      axios.post("http://localhost:1080/warehouse", {
        warehouseName: this.form.warehouseName,//库房名称
        warehouseAddress: this.form.warehouseAddress,
        stockKeeper: this.form.stockKeeper,
        alertValue: this.form.alertValue,
        maxInventory: this.form.maxInventory,//最大库存量
        warehouseLevel: 2
      }).then(res => {
        res = res.data
        if(res.code == 200){
          this.$message({
            type: 'success',
            message: '登记成功'
          });
        }else {
          this.$message({
            type: 'error',
            message: '登记失败!'
          });
        }

      })
      this.loadPost();
      this.clear();
      this.isShowForm = false;
    },
    updateWareHouse() {
      if (this.multipleSelection!=undefined&&this.multipleSelection.warehouseId != undefined){
        let row = this.multipleSelection
        this.WarehouseId = row.warehouseId
        this.form1.warehouseName = row.warehouseName
        this.form1.stockKeeper = row.stockKeeper
        this.form1.alertValue = row.alertValue
        this.form1.maxInventory = row.maxInventory
        this.isShowForm1 = true
      }else {
        ElMessage('请先选择要修改的商品！')
      }
    },
    sure() {
      axios.put("http://localhost:1080/warehouse", {
        warehouseId: this.WarehouseId,
        warehouseName: this.form1.warehouseName,//库房名称
        stockKeeper: this.form1.stockKeeper,
        alertValue: this.form1.alertValue,
        maxInventory: this.form1.maxInventory
      }).then(res => {
        res = res.data
        if (res.code == 200){
          this.$message({
            type: 'success',
            message: '修改成功'
          });
        }else if (res.code == 10009) {
          this.$message({
            type: 'warning',
            message: res.msg
          });
        } else {
          this.$message({
            type: 'error',
            message: '修改失败!'
          });
        }
      })
      this.isShowForm1 = false
      this.loadPost();
      this.clear();
    },
    deleteWareHouse() {
      if (this.multipleSelection!=undefined&&this.multipleSelection.warehouseId != undefined){
        let row = this.multipleSelection
        this.$confirm('此操作将永久删除商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.delete("http://localhost:1080/warehouse?" + "warehouseId=" + row.warehouseId)
              .then(res => {
                res = res.data
                this.loadPost()
                if (res.code === 200){
                  this.$message({
                    type: 'success',
                    message: '删除成功'
                  });
                }else {
                  this.$message({
                    type: 'error',
                    message: '删除失败!'
                  });
                }
              })
        }).catch(() => {
          ElNotification.success({
            title:'取消操作',
            message: '已取消删除',
            offset: 100,
          })
          this.loadPost()
        });
      }else {
        ElMessage('请先选择要删除的库房！')
      }

    },
    cancelExpert() {
      this.clear()
      this.isShowForm = false; //关闭对话框
      this.isShowForm1 = false;
      this.isShowSearchForm = false
      ElNotification.success({
        title:'取消操作',
        offset: 100,
      })
      this.loadPost()
    },
    clear() {
      this.form = {
        province: '',
        city: '',
        religion: '',
        other: '',
        warehouseName: '',
        warehouseAddress: '',
        stockKeeper: "",
        alertValue: null,
        maxInventory: null,
        warehouseLevel: 2
      }
    },
    search() {
      axios.post("http://localhost:1080/warehouse/page", {
        warehouseName: this.input,
        warehouseLevel: this.selectForm.level,
        warehouseAddress: this.selectForm.inboundRoom
      }).then(res => {
        res = res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
          this.totalSize = res.data.totalRows
          this.pageNow = 1
          this.$message({
            type: 'success',
            message: '查询成功!'
          });
        } else {
          this.tableData = []
          this.totalSize = 0
          this.$message({
            type: 'error',
            message: '查询失败!'
          });
        }

      })
      this.isShowSearchForm = false

    },
    mingxi(row) {
      this.$axios.post("http://localhost:1050/outOrder/queryMingXi", {
        warehouseId: row.warehouseId
      }).then(res => {
        res = res.data;
        this.table = res.data
      })
      this.Visible1 = true
      this.data = row
    },
    look(row) {
      this.$axios.post("http://localhost:1050/inventory/queryInventoryByWarehouseId?" + "warehouseId=" + row.warehouseId).then(res => {
        res = res.data;
        this.tableData1 = res.data
      })
      this.Visible = true
      this.data = row
    },
    getIndex(index) {
      index = index + 1 + (this.pageNow - 1) * this.pageSize
      return index
    },
    pageChange(val) {
      this.pageNow = val
      this.$axios.post("http://localhost:1080/warehouse/page", {
        pageNow: this.pageNow,
        pageSize: this.pageSize,
      }).then(res => {
        res = res.data
        if (res.code == '200') {
          this.tableData = res.data.rowData
        } else {
        }
      })
    },
    getLocations() {
      request_operation.get("/province").then(res => {
        console.log(res.data);
        this.locValue.provinces = res.data.data
      })
    },
    getProvinces() {
      this.form.city = ''
      this.form.religion = ''
      this.locValue.cities = this.locValue.provinces.filter((item) => item.provinceName === this.form.province)[0].cityList
      this.form.warehouseAddress = this.form.province
    },
    getCities() {
      this.form.religion = ''
      this.locValue.religions = this.locValue.cities.filter((item) => item.cityName === this.form.city)[0].regionList
      this.form.warehouseAddress = this.form.province + '-' + this.form.city
    },
    getRegions(value) {
      this.form.warehouseAddress = this.form.province + '-' + this.form.city + '-' + this.form.religion
      this.form.regionID = this.locValue.religions.filter((item) => item.regionName === value)[0].regionId
    },
    getOthers() {
      this.form.warehouseAddress = this.form.province + '-' + this.form.city + '-' + this.form.religion + '-' + this.form.other
    },
    loadPost() {
      this.$axios.post("http://localhost:1080/warehouse/page", {
        pageNow: this.pageNow,
        pageSize: this.pageSize
      }).then(res => {
        res = res.data
        if (res.code == '200') {
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData

        } else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },
    handleSelection(selection){
      this.multipleSelection = selection[0]
    },
    select(selection, row) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
  },
  beforeMount() {
    this.loadPost();
    this.getLocations();
    this.getBoundOptions();
  }
}
</script>

<style scoped>
body .el-table th.gutter {
  display: table-cell !important
}

.co1 {
  background: #77c7d0;

}

.co2 {
  background: #d9bf17;
}

.oo {
  background: #97d578
}

.btn1 {
  position: relative;
  right: 250px;
  top: 2px;
}

.head{
  margin: 10px 0;
  text-align: left;
}

/deep/.el-table__header-wrapper  .el-checkbox{
  display:none
}

</style>